import { Button, Checkbox, Form, InputNumber } from "antd";
import { useComputeSomething, FieldType } from "./store";

export const TabOne: React.FC = () => {
  const result = useComputeSomething((state) => state.result);
  const serverSideCompute = useComputeSomething(
    (state) => state.serverSideCompute
  );

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      initialValues={{ special: true }}
      onFinish={serverSideCompute}
      autoComplete="off"
    >
      <Form.Item<FieldType>
        label="InputA"
        name="inputA"
        rules={[{ required: true, message: "Please input specific a" }]}
      >
        <InputNumber />
      </Form.Item>

      <Form.Item<FieldType>
        label="InputB"
        name="inputB"
        rules={[{ required: true, message: "Please input specific b" }]}
      >
        <InputNumber />
      </Form.Item>

      <Form.Item<FieldType>
        name="special"
        valuePropName="checked"
        wrapperCol={{ offset: 8, span: 16 }}
      >
        <Checkbox>Special Function</Checkbox>
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
      <Form.Item label="Result">
        <div>{result}</div>
      </Form.Item>
    </Form>
  );
};
